<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>后台管理</title>
  <meta name="description" content="">
  <meta name="keywords" content="table">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" href="js/amazeui/css/amazeui.min.css"/>
  <link rel="stylesheet" href="js/amazeui/css/admin.css">
  <link rel="stylesheet" href="js/amazeui/css/uploadfile.css">

</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

  <!-- start nav -->
  <!-- end nav -->


<div class="am-cf admin-main">

  <!-- start menu -->
  <!-- end menu -->

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">案例列表</strong> / <small>新增</small></div>
      </div>

      <hr/>

      <div class="am-g">

        <div class="am-u-sm-12 am-u-md-4 am-u-md-push-8">
        </div>

        <div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4">
          <form class="am-form am-form-horizontal" action="product_add_make.php" method="post" enctype="multipart/form-data" id="form_box">

            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">案例分类</label>
              <div class="am-u-sm-9">

                <select name="category_no">

                <!-- start category -->
                  <option value="{no}">{title}</option>
                <!-- end category -->

                </select>

              </div>
            </div>


            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">标题</label>
              <div class="am-u-sm-9">
                <input type="text" class="am-input-sm" name="title">
              </div>
            </div>


            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">简介</label>
              <div class="am-u-sm-9">
               <textarea name="description" style="width: 400; height: 100px;"></textarea>
              </div>
            </div>


            <!-- start sort -->
            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">排序</label>
              <div class="am-u-sm-9">
                <input type="text" class="am-input-sm" name="sort" value="{sort}">
              </div>
            </div>
            <!-- end sort -->


          <input type="hidden" name="bannerfileList" id="bannerfileList">


          <div class="am-form-group">
              <label for="user-phone" class="am-u-sm-3 am-form-label">banner图片</label>
              <div class="am-u-sm-9" id="pic_box">

<div style="margin-top:5px;">
 <input type="file" name="picList[]" style="display: inline;" onchange="pic_upload('picList','bannerfileList', 'show_img')" id="picList">
</div>
              </div>
            </div>

            <div class="am-form-group">
              <label for="user-phone" class="am-u-sm-3 am-form-label"></label>
              <div class="am-u-sm-9">
               <div style="margin-top:5px;">
                <img src="/admin/images/default.gif" style="width: 150px;height: 150px;" id="show_img"/>
             </div>

              </div>
            </div>


          <input type="hidden" name="thumbfileList" id="thumbfileList">


          <div class="am-form-group">
              <label for="user-phone" class="am-u-sm-3 am-form-label">缩略图</label>
              <div class="am-u-sm-9" id="pic_box">

<div style="margin-top:5px;">
 <input type="file" name="picList2[]" style="display: inline;" onchange="pic_upload('picList2','thumbfileList', 'show_img2')" id="picList2">
</div>
              </div>
            </div>

            <div class="am-form-group">
              <label for="user-phone" class="am-u-sm-3 am-form-label"></label>
              <div class="am-u-sm-9">
               <div style="margin-top:5px;">
                <img src="/admin/images/default.gif" style="width: 150px;height: 150px;" id="show_img2"/>
             </div>

              </div>
            </div>

            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">案例详情图(电脑)</label>
              <div class="am-u-sm-9">

                <div id="goods_picture_box" class="controls goods_picture_box">
                <div class="ncsc-goods-default-pic">
                    <div class="goodspic-uplaod" style="padding: 15px;">
                        <div class="img-box" style="min-height:160px;">

                            <div class="upload-thumb" id="default_uploadimg"> 
                                <img src="/admin/images/default.gif">
                            </div>


                        </div>
                        <div class="clear"></div>
                        <span class="img-error">最少需要一张图片作为案例详情图主图</span>
                        <p class="hint">上传案例详情图,支持同时上传多张图片,多张图片之间可随意调整位置；支持jpg、gif、png格式</p>
                        <div class="handle">
                            <div class="ncsc-upload-btn">
                                <a href="javascript:void(0);">
                                    <span>
                                        <input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple">
                                    </span>
                                    <p>图片上传</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
              </div>

              </div>
            </div>



            <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">案例详情图(手机)</label>
              <div class="am-u-sm-9">

                <div id="goods_picture_box_wap" class="controls goods_picture_box">
                <div class="ncsc-goods-default-pic">
                    <div class="goodspic-uplaod" style="padding: 15px;">
                        <div class="img-box" style="min-height:160px;">

                            <div class="upload-thumb" id="default_uploadimg"> 
                                <img src="/admin/images/default.gif">
                            </div>


                        </div>
                        <div class="clear"></div>
                        <span class="img-error">最少需要一张图片作为案例详情图主图</span>
                        <p class="hint">上传案例详情图,支持同时上传多张图片,多张图片之间可随意调整位置；支持jpg、gif、png格式</p>
                        <div class="handle">
                            <div class="ncsc-upload-btn">
                                <a href="javascript:void(0);">
                                    <span>
                                        <input style="cursor:pointer;font-size:0;" type="file" id="fileupload_wap" hidefocus="true" class="input-file" name="file_upload" multiple="multiple">
                                    </span>
                                    <p>图片上传</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
              </div>

              </div>
            </div>


         <div class="am-form-group">
              <label for="admin-name" class="am-u-sm-3 am-form-label">是否上线</label>
              <div class="am-u-sm-9">

                <select name="is_online">
                  <option value="Y">是</option>
                  <option value="N">否</option>
                </select>

              </div>
            </div>


            <div class="am-form-group">
              <div class="am-u-sm-9 am-u-sm-push-3">
                <button type="button" class="am-btn am-btn-primary" onclick="form_submit()">保存</button>

                <button type="button" class="am-btn am-btn-primary" onclick="window.history.go(-1)">返回</button>

              </div>
            </div>



          </form>
        </div>
      </div>
    </div>


  <!-- start footer -->
  <!-- end footer -->

  </div>
  <!-- content end -->

</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<!-- <script src="js/amazeui/js/jquery.min.js"></script>
 --><!--<![endif]-->
<script src="js/uploadfile/jquery-1.8.1.min.js"></script>

<script src="js/amazeui/js/amazeui.min.js"></script>
<script src="js/amazeui/js/app.js"></script>
<script src="js/common.js"></script>


<script src="js/uploadfile/jquery-ui.min.js"></script>
<script src="js/uploadfile/ajax_file_upload.js"></script>
<script src="js/uploadfile/drag-arrange.js"></script>
<script src="js/uploadfile/jquery.fileupload.js"></script>
<script src="js/uploadfile/jquery.ui.widget.js"></script>


<script type="text/javascript">
  function form_submit()
  {
      var url = $('#form_box').attr('action');
      var param = $('#form_box').serialize();
      
      myAjax(url, param, 'POST');
  }

</script>



<script type="text/javascript">

$(function() {
    //给图片更换位置事件
    $('.draggable-element').arrangeable();
    

    //电脑
    $('#fileupload').fileupload({
        url: "img_upload_more.ajax.php",
        dataType: 'json',
        formData:'',
        add: function (e,data) {
            $("#goods_picture_box .img-error").hide();
            $("#goods_picture_box #default_uploadimg").remove();
            //显示上传图片框
            var html = "";
            $.each(data.files, function (index, file) {
                html +='<div class="upload-thumb draggable-element"  nstype="1">'; 
                html +='<img nstype="goods_image" src="/admin/images/uoload_ing.gif">';  
                html +='<input type="hidden"  class="upload_img_id" nstype="goods_image" name="pc_pic[]" value="">'; 
                html +='<div class="black-bg hide">'; 
                html +='<div class="off-box">&times;</div>'; 
                html +='</div>'; 
                html +='</div>'; 
            });

            $(html).appendTo('#goods_picture_box .img-box');

            //模块可拖动事件
            $('#goods_picture_box .draggable-element').arrangeable();

            data.submit();      
        },
        done: function (e,data) {

            var param = data.result.result;
            console.log(param);

            $this = $('#goods_picture_box div[nstype="1"]');
           if(param.status.code == 0){
                $this.removeAttr("nstype");
                $this.children("img").attr("src",param.data.url);
                $this.children("input[type='hidden']").val(param.data.url);              
            }
            else
            {
                $this.remove();

                if($("#goods_picture_box .img-box .upload-thumb").length == 0)
                {
                    var  img_html ='<div class="upload-thumb" id="default_uploadimg">';
                         img_html +='<img src="/admin/images/default.gif">';
                         img_html +='</div>';

                    $("#goods_picture_box .img-box").append(img_html);
                }

                $("#goods_picture_box .img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();                
            }
        }      
    });


    //手机
    $('#fileupload_wap').fileupload({
        url: "img_upload_more.ajax.php",
        dataType: 'json',
        formData:'',
        add: function (e,data) {
            $("#goods_picture_box_wap .img-error").hide();
            $("#goods_picture_box_wap #default_uploadimg").remove();
            //显示上传图片框
            var html = "";
            $.each(data.files, function (index, file) {
                html +='<div class="upload-thumb draggable-element"  nstype="1">'; 
                html +='<img nstype="goods_image" src="/admin/images/uoload_ing.gif">';  
                html +='<input type="hidden"  class="upload_img_id" nstype="goods_image" name="wap_pic[]" value="">'; 
                html +='<div class="black-bg hide">'; 
                html +='<div class="off-box">&times;</div>'; 
                html +='</div>'; 
                html +='</div>'; 
            });

            $(html).appendTo('#goods_picture_box_wap .img-box');

            //模块可拖动事件
            $('#goods_picture_box_wap .draggable-element').arrangeable();

            data.submit();      
        },
        done: function (e,data) {

            var param = data.result.result;
            console.log(param);

            $this = $('#goods_picture_box_wap div[nstype="1"]');
           if(param.status.code == 0){
                $this.removeAttr("nstype");
                $this.children("img").attr("src",param.data.url);
                $this.children("input[type='hidden']").val(param.data.url);              
            }
            else
            {
                $this.remove();

                if($("#goods_picture_box_wap .img-box .upload-thumb").length == 0)
                {
                    var  img_html ='<div class="upload-thumb" id="default_uploadimg">';
                         img_html +='<img src="/admin/images/default.gif">';
                         img_html +='</div>';

                    $("#goods_picture_box_wap .img-box").append(img_html);
                }

                $("#goods_picture_box_wap .img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();                
            }
        }      
    });
    
  
    //图片幕布出现
    $(".draggable-element").live('mouseenter',function(){  
          $(this).children(".black-bg").show();
    });
    //图片幕布消失
    $(".draggable-element").live('mouseleave',function(){       
      $(this).children(".black-bg").hide();
    });
    
  //sku图片幕布出现
    $(".sku-draggable-element").live('mouseenter',function(){  
          $(this).children(".black-bg").show();
    });
    //sku图片幕布消失
    $(".sku-draggable-element").live('mouseleave',function(){       
      $(this).children(".black-bg").hide();
    });
    
    //删除页面图片元素
    $(".off-box").live('click',function(){ 
        if($(".img-box .upload-thumb").length == 1){
            var html = "";
            html +='<div class="upload-thumb" id="default_uploadimg">';
            html +='<img nstype="goods_image" src="/public/admin/images/album/default_goods_image_240.gif">';
            html +='<input type="hidden" name="image_path" id="image_path" nstype="goods_image" value="">';      
            html +='</div>';
            $(html).appendTo('.img-box');
        }
        $(this).parent().parent().remove();           
    });

});


</script>





</body>
</html>
